<template>
  <t-modal
    :title="title"
    width="1048px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-modal-container"
    v-bind="footer"
    forceRender
    :confirm-loading="submitLoading"
  >
    <div class="curve-modal-body">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="isDisabled"
      >
        <a-row>
          <!-- 项目名称 -->
          <a-col :span="24">
            <a-form-model-item label="项目名称" prop="proName">
              <a-input v-model="form.proName" :disabled="isDisabled"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目编号 -->
          <a-col :span="12">
            <a-form-model-item label="项目编号">
              <a-input v-model="form.proCode" :disabled="isDisabled"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目类型 -->
          <a-col :span="12">
            <a-form-model-item label="项目类型">
              <a-input
                v-model="form.engTypeDesc"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 省市县 -->
          <a-col :span="12">
            <a-form-model-item label="省市县">
              <!-- <a-cascader
                :disabled="isDisabled"
                :options="provinceSource"
                :field-names="{
                  label: 'name',
                  value: 'name',
                  children: 'children',
                }"
                placeholder="请选择省市县"
                v-model="form.workArea"
              /> -->
              <a-input v-model="form.workArea" :disabled="isDisabled"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目状态 -->
          <a-col :span="12">
            <a-form-model-item label="项目状态">
              <a-input
                v-model="form.proStatusDesc"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目等级 -->
          <a-col :span="12">
            <a-form-model-item label="项目等级">
              <a-input
                v-model="form.proLevelDesc"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目规模 -->
          <a-col :span="12">
            <a-form-model-item label="项目规模">
              <a-input
                v-model="form.constructionScale"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 计划开工时间 -->
          <a-col :span="12">
            <a-form-model-item label="计划开工时间">
              <a-input
                v-model="form.startDate"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 计划竣工时间 -->
          <a-col :span="12">
            <a-form-model-item label="计划计划竣工时间">
              <a-input v-model="form.endDate" :disabled="isDisabled"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 实际开工时间 -->
          <a-col :span="12">
            <a-form-model-item label="实际开工时间">
              <a-input
                v-model="form.realityStartDate"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 实际竣工时间 -->
          <a-col :span="12">
            <a-form-model-item label="实际竣工时间">
              <a-input
                v-model="form.realityEndDate"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 总投资额 -->
          <a-col :span="24">
            <a-form-model-item label="总投资额">
              <a-input
                v-model="form.roadMoney"
                placeholder="请输入总投资额"
                suffix="万元"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目经理 -->
          <a-col :span="12">
            <a-form-model-item label="项目经理">
              <a-input v-model="form.contacts" :disabled="isDisabled"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 联系方式 -->
          <a-col :span="12">
            <a-form-model-item label="联系方式">
              <a-input
                v-model="form.contactsPhone"
                :disabled="isDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <!-- 项目地址 -->
          <a-col :span="24">
            <a-form-model-item label="项目地址">
              <a-input
                v-model="form.address"
                placeholder="请选择项目地址"
                :disabled="isDisabled"
              ></a-input>
              <!-- <a-row>
                <a-col :span="8">
                  <a-cascader
                    :disabled="isDisabled"
                    :options="provinceSource"
                    :field-names="{
                      label: 'name',
                      value: 'name',
                      children: 'children',
                    }"
                    placeholder="请选择区域"
                    v-model="form.workArea"
                  />
                </a-col>
                <a-col :span="16">
                  <a-input
                    v-model="form.contractName"
                    placeholder="请输入详细地址"
                    :disabled="isDisabled"
                    style="margin-left:10px;width: calc(100% - 10px);"
                  ></a-input>
                </a-col>
              </a-row> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import areaData from "@/components/_utils/area-json.js";
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    operateType: {
      type: [String, Number],
      default: 1,
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      //省市区
      provinceSource: areaData,
      submitLoading: false,
      title: "新增",
      footer: {},
      isDisabled: false,
      form: {
        //项目名称
        proName: "",
        //项目编号
        proCode: "",
        //项目类型
        engTypeDesc: undefined,
        //省市县
        workArea: undefined,
        //项目地址
        address: "",
        //项目状态
        proStatusDesc: "",
        //项目等级
        proLevelDesc: "",
        //项目规模
        constructionScale: "",
        //计划开工时间
        startDate: "",
        //计划竣工时间
        endDate: "",
        //实际开工时间
        realityStartDate: "",
        //实际竣工时间
        realityEndDate: "",
        //总投资额
        roadMoney: "",
        //项目经理
        contacts: "",
        //联系方式：
        contactsPhone: "",
      },
      rules: {},
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    replaceStr(str) {
      return str.replace(/@/g, ">");
    },

    //查询数据
    async getData() {
      await this.filterTitle();
      //编辑
      if (this.operateType != 1) {
        this.getDetail();
      }
    },

    //
    filterTitle() {
      let { operateType } = this;
      switch (operateType) {
        case 1:
          this.title = "新增";
          this.footer = {};
          this.isDisabled = false;
          break;

        case 2:
          this.title = "编辑";
          this.footer = {};
          this.isDisabled = false;
          break;

        case 3:
          this.title = "详情";
          this.footer = { footer: null };
          this.isDisabled = true;
          break;

        default:
          break;
      }
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { form } = this;
        }
      });
    },

    //详情
    getDetail() {
      let { proCode } = this.row;
      return new Promise((resolve, reject) => {
        axios
          .post(`/mdata/sysProject/queryProByProCode?proCode=${proCode}`, {
            headers: {
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            let {
              proName,
              proCode,
              engTypeDesc,
              workArea,
              address,
              proStatusDesc,
              proLevelDesc,
              constructionScale,
              startDate,
              endDate,
              realityStartDate,
              realityEndDate,
              roadMoney,
              contacts,
              contactsPhone,
            } = res || {};
            //项目名称
            this.form.proName = proName;
            //项目编号
            this.form.proCode = proCode;
            //项目类型
            this.form.engTypeDesc = engTypeDesc;
            //省市县
            this.form.workArea = this.replaceStr(workArea);
            //项目地址
            this.form.address = address;
            //项目状态
            this.form.proStatusDesc = proStatusDesc;
            //项目等级
            this.form.proLevelDesc = proLevelDesc;
            //项目规模
            this.form.constructionScale = constructionScale;
            //计划开工时间
            this.form.startDate = startDate;
            //计划竣工时间
            this.form.endDate = endDate;
            //实际开工时间
            this.form.realityStartDate = realityStartDate;
            //实际竣工时间
            this.form.realityEndDate = realityEndDate;
            //总投资额
            this.form.roadMoney = roadMoney;
            //项目经理
            this.form.contacts = contacts;
            //联系方式：
            this.form.contactsPhone = contactsPhone;
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //重置表单
    resetForm() {
      this.form = {
        //项目名称
        proName: "",
        //项目编号
        proCode: "",
        //项目类型
        engTypeDesc: undefined,
        //省市县
        workArea: undefined,
        //项目地址
        address: "",
        //项目状态
        proStatusDesc: "",
        //项目等级
        proLevelDesc: "",
        //项目规模
        constructionScale: "",
        //计划开工时间
        startDate: "",
        //计划竣工时间
        endDate: "",
        //实际开工时间
        realityStartDate: "",
        //实际竣工时间
        realityEndDate: "",
        //总投资额
        roadMoney: "",
        //项目经理
        contacts: "",
        //联系方式：
        contactsPhone: "",
      };
      this.$refs.ruleForm.resetFields();
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 70px 14px 0;
      max-height: 700px;
      overflow: auto;
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 160px;
          label {
            color: #333333;
          }
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
        .page-unit {
          position: absolute;
          right: 30px;
          font-size: 14px;
          color: #8a8a8c;
        }
      }
    }
  }
}
</style>
